<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 添加样式标签，先通过样式隐藏，再在内存中替换，将值显示 */
        
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg1}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg3"></div>
        <div v-pre>{{v-pre显示原始信息跳过编译过程}}</div>
        <div v-once>{{msg4}}</div>
        <div>
            <input type="text" v-model='msg5'>
            <div>{{msg5}}</div>
        </div>
        <div>v-on绑定事件{{nums}}</div>
        <div>
            <button v-on:click='nums++'>v-on</button>
            <button @click='handle1'>v-on</button>
            <button @click='handle2(123,$event)'>v-on</button>
        </div>
        <div>
            <!-- 事件修饰符 -->
            <button @click.stop='handle2(123,$event)'>阻止冒泡</button>
            <a href="www.baidu.com" @click.prevent='handle1'>阻止默认行为</a>
        </div>
        <div>
            <!-- 按键修饰符 -->
            <input type="text" @keyup.enter='handle3' @keyup.delete='handle4' v-model='username'>
        </div>
        <div>
            <!-- 自定义按键修饰符 -->
            <input type="text" @keyup.32='handle3' v-model='username'>
            <!-- <input type="text" @keyup.kongge='handle3' v-model='username'> -->
        </div>
        <div>
            <!-- 属性绑定 -->
            <a :href="url">v-bind</a>
            <a v-bind:href="url">v-bind</a>
        </div>
        <div>
            <!-- 双向绑定原理 -->
            <input type="text" v-bind:value='msg' v-on:input='msg=$event.target.value'>
        </div>


    </div>
    <script src="../js/vue.min.js"></script>
    <script>
        // 自定义按键修饰符 
        // Vue.config.keyCode.kongge = 32;

        let vm = new Vue({
            el: '#app',
            data: {
                msg: '',
                msg1: 'v-cloak解除闪避,用于差值表达式',
                msg2: 'v-text填充文字，且没有闪动',
                msg3: '<h1>v-html会解析html标签，容易导致跨站脚本攻击</h1>',
                msg4: 'v-once只编译一次，不具备响应式功能,显示的信息后续不需要修改时使用，提高性能',
                msg5: 'v-mode双向绑定，页面内容和数据模型互相关联',
                nums: 0,
                username: '',
                url: 'www.baidu.com'

            },
            methods: {
                // 如果事件绑定函数名称，默认第一个参数是事件对象
                handle1: function(event) {
                    console.log('this是Vue的实例对象');
                    this.nums--;
                    console.log(event.target.innerHtml);
                },
                // 如果事件绑定函数调用，最后一个参数是事件对象，手动添加
                handle2: function(p, event) {
                    console.log(p);
                    console.log(event.target.innerHtml);
                },
                handle3: function() {
                    console.log(this.username);
                },
                handle4: function() {
                    this.username = '';
                }
            },

        })
    </script>
</body>

</html>